#include('header.html', {title: '后台管理·仪表盘', index: 'active'})

<div class="body-wrapper">
  <div class="layui-row" style="margin: 0 -10px;">
    <div class="layui-col-sm4">
      <div class="card">
        <div class="card-body">
          <div class="clearfix">
            <div class="float-left">
              <i class="layui-icon layui-icon-user icon-user"></i>
            </div>
            <div class="float-right">
              <div class="val">
                <h3>${users}</h3>
              </div>
              <p class="text-muted">
                <i class="layui-icon-note layui-icon"></i> 平台用户量
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-sm4">
      <div class="card">
        <div class="card-body">
          <div class="clearfix">
            <div class="float-left">
              <i class="layui-icon layui-icon-video icon-video"></i>
            </div>
            <div class="float-right">
              <div class="val">
                <h3>${courses}</h3>
              </div>
              <p class="text-muted">
                <i class="layui-icon-note layui-icon"></i> 平台课程数
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-sm4">
      <div class="card">
        <div class="card-body">
          <div class="clearfix">
            <div class="float-left">
              <i class="layui-icon layui-icon-website icon-visitor"></i>
            </div>
            <div class="float-right">
              <div class="val">
                <h3>${views}</h3>
              </div>
              <p class="text-muted">
                <i class="layui-icon-note layui-icon"></i> 今日访问量
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <div class="layui-row">
    <div class="layui-card layui-col-sm6">
      <div class="layui-card-body">
        <table id="notice" lay-filter="noticeTab"></table>
      </div>
      <script type="text/html" id="noticeTool">
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
      </script>
    </div>

    <div class="layui-card layui-col-sm6">
      <div class="layui-card-body">
        <table id="views" lay-filter="viewTab"></table>
      </div>
    </div>
  </div>
</div>

<div id="publish-box" style="display: none;">
  <div class="layui-card">
    <div class="layui-card-body">
      <form class="layui-form">
        <div class="layui-form-item">
          <label class="layui-form-label">开始时间</label>
          <div class="layui-input-block">
            <input name="startTime" class="layui-input" id="beginTime">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">结束时间</label>
          <div class="layui-input-block">
            <input name="endTime" class="layui-input" id="endTime">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">公告内容</label>
          <div class="layui-input-block">
            <textarea name="content" cols="4" class="layui-textarea" lay-verify="required"
                      lay-verType="tips"></textarea>
          </div>
        </div>
        <div>
          <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="publishAnn">发布</button>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  var layerIndex = 0;
  layui.use(['table', 'form', 'jquery', 'layer', 'laydate'], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var layer = layui.layer;
    var laydate = layui.laydate;
    var form = layui.form;
    var $ct = $('[name="content"]');

    var methods = {
      publish: function () {
        $ct.val('');
        layerIndex = layer.open({
          type: 1,
          title: '发布公告',
          content: $('#publish-box')
        });
      },
      del: function (ref) {
        var ann = ref.data;
        layer.confirm('确定删除该公告吗？', {title: '删除提示', icon: 3}, function (index) {
          $.post('/user/teacher/announcement/deleteAnn', {id: ann.id}, function (data) {
            if (data.success) {
              layer.msg('删除成功', {time: 1200, icon: 6});
              table.reload('notice');
            }
          });
          layer.close(index);
        });
      }
    };

    form.on('submit(publishAnn)', function (ev) {
      $.post('/user/teacher/announcement/add', ev.field, function (data) {
        if (data.success) {
          layer.close(layerIndex);
          layer.msg('发布成功！', {icon: 6, time: 1200});
          table.reload('notice');
        }
      });
      return false;
    });


    function parseData(res) {
      return {
        "code": 0,
        "msg": res.msg,
        "count": (res.payload ? res.payload.totalRows : 0),
        "data": (res.payload ? res.payload.rows : [])
      };
    }

    var noticeTable = table.render({
      elem: '#notice',
      url: '/user/teacher/announcement/anns',
      method: 'post',
      page: true,
      toolbar: '<p><a class="layui-btn layui-btn-sm" lay-event="publish">发布公告</a></p>',
      defaultToolBar: [],
      cols: [[
        {title: '序号', type: 'numbers'},
        {title: '内容', field: 'content'},
        {title: '开始时间', field: 'startTime'},
        {title: '结束时间', field: 'endTime'},
        {title: '操作', toolbar: '#noticeTool', width: 100}
      ]],
      where: {all: true},
      parseData: parseData
    });

    var viewsTable = table.render({
      elem: '#views',
      url: '/count/api/views',
      method: 'post',
      page: true,
      cols: [[
        {title: '序号', type: 'numbers'},
        {title: '日期', field: 'date'},
        {title: '访问量', field: 'views'}
      ]],
      parseData: parseData
    });

    table.on('tool(noticeTab)', function (ce) {
      var m = methods[ce.event];
      if (m != null) m(ce);
    });
    table.on('toolbar(noticeTab)', function (ce) {
      var m = methods[ce.event];
      if (m != null) m();
    });

    laydate.render({
      elem: '#beginTime',
      value: new Date(),
      theme: '#5fa177'
    });
    laydate.render({
      elem: '#endTime',
      value: new Date(),
      theme: '#991923'
    })
  });
</script>

#include('footer.html')
